<style lang="scss" scoped>
    @import '../../css/base-color.scss';
    .bg-head{
        background: -webkit-linear-gradient(#645ef3, #5979f8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#645ef3, #5979f8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#645ef3, #5979f8); /* Firefox 3.6 - 15 */
        background: linear-gradient(#645ef3, #5979f8); /* 标准的语法 */
    }
    .head-box{min-width: 1050px;max-width: 1280px; margin: 0 auto;padding-bottom: 100px;}
    .head-top{padding-top: 32px;font-size: 14px;}
    .head-top i.iconfont{
        font-size:36px;
        color:#fff;
        line-height:1;
    }

    .register{margin-left: 10px;padding: 3px 12px;color: #fff;border:1px solid #fff;cursor: pointer;}
    .login{padding: 3px 12px;color: #fff;border:1px solid #fff;cursor: pointer;}
    .head-middle-left{color: #fff;margin-left: 20px;margin-top: 120px;}
    .head-middle-left div{font-size: 36px;}
    .head-middle-left p{font-size: 16px;}
    .head-img{max-width: 731px;width: 60%}
    .bg-body1{
        background: -webkit-linear-gradient(#f3f8fc, #fff); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#f3f8fc, #fff); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#f3f8fc, #fff); /* Firefox 3.6 - 15 */
        background: linear-gradient(#f3f8fc, #fff); /* 标准的语法 */
        height: 460px;
    }
    .body1-box{min-width: 1050px; max-width: 1280px;margin: 0 auto;position: relative;}
    .body1-inner{position: absolute;top:-100px;left: 0;width: 100%;padding-top: 70px; background: #fff;text-align: center;box-shadow: 0 0 10px 2px rgba(59,82,176,.1);}
    .body1-box-title{font-size: 36px;color: #2a313d;}
    .body1-main-box{padding-top: 50px;padding-bottom: 110px;}
    .body1-main-box-one{width: 236px;display: inline-block;padding: 0 1%;}
    .box-one-title{font-size: 16px;padding: 20px 0;font-weight: bold;}
    .box-one-word{font-size: 12px;color: #a0a3a9;}

    .bg-body2{
        background: #fff;
    }
    .body2-box{min-width: 1050px;max-width: 1280px;margin: 0 auto;padding-top: 60px;}
    .body2-left-title{color: #2a313d;font-size: 36px;}
    .body2-box-one-top img{margin-right: 10px;}
    .body2-box-one-top span{font-size: 16px;font-weight: bold;}
    .body2-box-one-foot{color: #2a313d;padding: 4px 0 10px 24px;font-size: 12px;}
    .body2-right-img{max-width: 594px;width: 44%;}

    .body2-section2{min-width: 1050px;max-width: 1280px;margin: 100px auto 0;}
    .section2-left-img{max-width: 635px;width: 50%;}
    .section2-right{margin-top: 100px;}
    .section2-one{margin-top: 18px;}
    .section2-one img{margin-right: 10px;}
    .section2-one span{font-size: 16px;}

    .section3-one{margin-top: 16px;}
    .section3-one img{margin-right: 10px;}
    .section3-one span{font-size: 14px;}
    .section3-img{max-width: 438px;width: 38%;}

    .section4-left-img{max-width: 572px;width: 40%;}
    .section4-right{width: 620px;margin-top: 70px;}
    .section4-one{font-size: 14px;margin-top: 10px;}

    .bg-foot{background: #1c1f37;}
    .foot-box{min-width: 1050px;max-width: 1280px;margin: 0 auto;padding: 70px 0;color: #bbbcc3;font-size: 12px;}
    .foot-left{margin-left:40px;margin-top: 15px;}
    .foot-name{font-size: 14px;padding-bottom: 10px;}
    .foot-icon{font-size: 12px;margin-top: 10px;}
    .foot-icon img{margin-right: 10px;}
    .foot-right{text-align: center;margin-right: 40px;}
</style>

<template>
    <section>
        <div class="bg-head">
            <div class="head-box">
                <div class="head-top clearfix">
                    <i class="icon iconfont"></i>
                    <!-- <img src="http://jhsy-img.caizhu.com/sass/images/ic-logo.png" alt=""> -->
                    <!-- <span @click="goto('/register/add-phone')" class="register fr">企业注册</span> -->
                    <span @click="goto('/register/new-login')" class="login fr">企业登录</span>
                </div>
                <div class="head-middle pt60 clearfix">
                    <div class="head-middle-left fl">
                        <div>企业人才培养阵地</div>
                        <p class="mt30">创建自由人才培养体系，构建专属您的企业大学</p>
                        <p class="mt">提升企业人才能力拓展，加速企业快速发展</p>
                    </div>
                    <img class="head-img fr" src="http://jhsy-img.caizhu.com/saas/introduceic-banner.png" alt="">
                </div>
            </div>
        </div>
        <div class="bg-body1">
            <div class="body1-box">
                <div class="body1-inner">
                    <div class="body1-box-title">静好学堂，让企业拥有自己的移动平台</div>
                    <div class="body1-main-box">
                        <div class="body1-main-box-one">
                            <div class="box-one-head"><img src="http://jhsy-img.caizhu.com/saas/introduceic-plan.png" alt=""></div>
                            <div class="box-one-title">计划介绍</div>
                            <p class="box-one-word">企业员工每天阅读15分钟，在读书上以及思考讨论中成就更好的自己</p>
                        </div>

                        <div class="body1-main-box-one">
                            <div class="box-one-head"><img src="http://jhsy-img.caizhu.com/saas/introduceic-book.png" alt=""></div>
                            <div class="box-one-title">书单概览</div>
                            <p class="box-one-word">为企业提供自选和设计好课程两种模式，让您全方位的根据喜好进行选择</p>
                        </div>

                        <div class="body1-main-box-one">
                            <div class="box-one-head"><img src="http://jhsy-img.caizhu.com/saas/introduceic-product.png" alt=""></div>
                            <div class="box-one-title">产品功能</div>
                            <p class="box-one-word">每天为您发送阅读提醒，有打卡功能，可以与看过同样书籍学友发表对书的看法</p>
                        </div>

                        <div class="body1-main-box-one">
                            <div class="box-one-head"><img src="http://jhsy-img.caizhu.com/saas/introduceic-backstage.png" alt=""></div>
                            <div class="box-one-title">后台功能</div>
                            <p class="box-one-word">为每个企业配备专有的管理后台，随时浏览员工的阅读数据、考试结果，便于企业管理</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-body2 pb60">
            <div class="body2-box clearfix">
                <div class="body2-left fl">
                    <div class="body2-left-title">坚持让员工学习是给他们最好的福利</div>
                    <ul class="body2-left-box">
                        <li class="body2-box-one mt30">
                            <div class="body2-box-one-top">
                                <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                                <span>助力员工成长</span>
                            </div>
                            <p class="body2-box-one-foot">精品课+知识库：拓展学习内容，有计划的进行培训，随时随地的学习，助力员工成长的工具</p>
                        </li>
                        <li class="body2-box-one">
                            <div class="body2-box-one-top">
                                <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                                <span>提升管理效率</span>
                            </div>
                            <p class="body2-box-one-foot">一站式管理：对线上、线下、公司内外部的培训管理通过统一平台完成，实时生成各类数据统计报表</p>
                        </li>
                        <li class="body2-box-one">
                            <div class="body2-box-one-top">
                                <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                                <span>降低培训成本</span>
                            </div>
                            <p class="body2-box-one-foot">在线学习系统减少各类人和场地、时间的投入，减少各类重复的线下培训，减少组织成本</p>
                        </li>
                        <li class="body2-box-one">
                            <div class="body2-box-one-top">
                                <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                                <span>塑造企业品牌</span>
                            </div>
                            <p class="body2-box-one-foot">完善的企业培训学习系统提升企业在人力资源市场形象，成为企业文化的一张闪亮名片</p>
                        </li>
                    </ul>
                </div>
                <img class="body2-right-img fr" src="http://jhsy-img.caizhu.com/saas/introduceic-welfare.png" alt="">
            </div>

            <div class="body2-section2 clearfix">
                <img class="section2-left-img fl" src="http://jhsy-img.caizhu.com/saas/introduceic-problem.png" alt="">
                <div class="section2-right fr">
                    <div class="body2-left-title">您的企业有这样的问题吗？</div>
                    <div class="section2-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>需要高昂的内训成本？</span>
                    </div>

                    <div class="section2-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>公司人员分布广，培训难管理？</span>
                    </div>

                    <div class="section2-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>租场地，请讲师，过程太繁琐？</span>
                    </div>

                    <div class="section2-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>培训没有体系，方案不够完善？</span>
                    </div>

                    <div class="section2-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>组织难上加难，培训效果却很差？</span>
                    </div>

                </div>
            </div>

            <div class="body2-section2 clearfix">
                <div class="section2-right fl">
                    <div class="body2-left-title">您可以选择这样，让企业学习更容易</div>
                    <div class="section3-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>建档案：员工入职即可建立信息档案库，全程记录员工培训成长曲线；</span>
                    </div>

                    <div class="section3-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>在线课：企业内部文件快速转换成在线课程，文件学习、领导演讲开会、员工经验分享、在线直播；</span>
                    </div>

                    <div class="section3-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>资料库：整合企业内训资料，建立资料库，丰富企业文化，构建可持续学习的企业组织；</span>
                    </div>

                    <div class="section3-one">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-circle.png" alt="">
                        <span>跨部门：部门间统一通知，一起内训，促进各部门间工作协调统一。</span>
                    </div>

                </div>
                <img class="section3-img fr" src="http://jhsy-img.caizhu.com/saas/introduceic-easy.png" alt="">
            </div>

            <div class="body2-section2 pb60 clearfix">
                <img class="section4-left-img fl" src="http://jhsy-img.caizhu.com/saas/introduceic-moment.png" alt="">
                <div class="section4-right fr">
                    <div class="body2-left-title">一个平台，多个终端，让学习随时随地</div>
                    <p class="section4-one">灵活配置，随意切换。实现碎片化自主学习、线上线下培训计划型学习、知识社区互动式学习、签到考试问卷测评等多种学习成果呈现。</p>
                    <p class="section4-one">凭借唯一账号，即可实现电脑、pad、手机应用的无缝切换，实时同步学习记录及信息。</p>
                </div>
            </div>
        </div>
        <div class="bg-foot">
            <div class="foot-box clearfix">
                <div class="foot-left fl">
                    <p class="foot-name">杭州祯宝网络科技有限公司</p>
                    <p class="foot-icon">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-location.png" alt="">
                        <span>杭州市文一西路588号中节能西溪首座A1-1-719</span>
                    </p>
                    <p class="foot-icon">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-phone.png" alt="">
                        <span>0571-87555881</span>
                    </p>
                    <p class="foot-icon">
                        <img src="http://jhsy-img.caizhu.com/saas/introduceic-mail.png" alt="">
                        <span>yilia@jhshuyuan.com</span>
                    </p>
                    <p class="mt20">Copyright © 2017 All rights reserved 浙ICP备17013600号-1</p>
                </div>
                <div class="foot-right fr">
                    <img src="http://jhsy-img.caizhu.com/saas/introduceic-code.png" alt="">
                    <p class="mt">扫码关注静好学堂公众号</p>
                </div>
            </div>
        </div>

    </section>
</template>

<script>
	import qs from 'qs'

	export default{
		data: function(){
			return {
//				active: 0
            }
		},
		methods: {
            goto(u){
                if(u){
                    location.assign(u)
                }
            }
		},
		mounted: function(){

			/*axios.post('/xxx', qs.stringify({})).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                }
            } )*/
		}
	}


</script>
